<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="search">
        <el-form ref="queryFormRef" :inline="true" :model="queryParams" label-width="100px">
          <el-form-item label="电梯名称" prop="elevatorName">
            <el-input v-model="queryParams.elevatorName" clearable placeholder="请输入电梯名称" style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="当前流程状态" prop="processState">
            <el-select v-model="queryParams.processState" clearable placeholder="请输入当前流程状态" style="width: 240px">
              <el-option v-for="dict in iot_repair_process" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="Search" type="primary" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <!--          <el-col :span="1.5">-->
          <!--            <el-button v-hasPermi="['iot:elevatorRepair:add']" icon="Plus" plain type="primary" @click="handleAdd"> 新增 </el-button>-->
          <!--          </el-col>-->
          <!--          <el-col :span="1.5">-->
          <!--            <el-button v-hasPermi="['iot:elevatorRepair:edit']" :disabled="single" icon="Edit" plain type="success" @click="handleUpdate()"-->
          <!--              >修改-->
          <!--            </el-button>-->
          <!--          </el-col>-->
          <el-col :span="1.5">
            <el-button v-hasPermi="['iot:elevatorRepair:remove']" :disabled="multiple" icon="Delete" plain type="danger" @click="handleDelete()"
              >删除
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button v-hasPermi="['iot:elevatorRepair:export']" icon="Download" plain type="warning" @click="handleExport">导出 </el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" :data="elevatorRepairList" @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" label="电梯名称" prop="elevatorName" />
        <el-table-column align="center" label="维修单号" prop="repairCode" />
        <el-table-column align="center" label="故障单号" prop="faultCode" />
        <el-table-column align="center" label="开始时间" prop="startDate" width="180" />
        <el-table-column align="center" label="提交时间" prop="submitDate" width="180" />
        <el-table-column align="center" label="维修用时" prop="repairHours" />
        <el-table-column align="center" label="更换配件" prop="replaceParts" />
        <el-table-column align="center" label="故障原因" prop="faultReason" />
        <el-table-column align="center" label="维修方案" prop="repairPlan" />
        <el-table-column align="center" label="维修人" prop="repairPeople" />
        <el-table-column align="center" label="当前流程状态" prop="processState">
          <template #default="scope">
            <dict-tag :options="iot_repair_process" :value="scope.row.processState"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="确认人" prop="confirmPeople" />
        <el-table-column align="center" label="确认时间" prop="confirmDate" width="180" />
        <el-table-column align="center" label="评分" prop="score" />
        <el-table-column align="center" label="评分内容" prop="scoreContent" />
        <el-table-column align="center" label="派单人" prop="dispatchPeople" />
        <el-table-column align="center" label="派单时间" prop="dispatchDate" width="180" />
        <el-table-column align="center" label="提交人" prop="submitter" />
        <el-table-column align="center" label="备注" prop="remark" />
        <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button v-hasPermi="['iot:elevatorRepair:edit']" icon="Edit" link type="primary" @click="handleUpdate(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button v-hasPermi="['iot:elevatorRepair:remove']" icon="Delete" link type="primary" @click="handleDelete(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum" :total="total" @pagination="getList" />
    </el-card>
    <!-- 添加或修改电梯维修对话框 -->
    <!--    <el-dialog v-model="dialog.visible" :title="dialog.title" append-to-body width="500px">-->
    <!--      <el-form ref="elevatorRepairFormRef" :model="form" :rules="rules" label-width="80px">-->
    <!--        <el-form-item label="关联电梯ID" prop="elevatorId">-->
    <!--          <el-input v-model="form.elevatorId" placeholder="请输入关联电梯ID" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="电梯名称" prop="elevatorName">-->
    <!--          <el-input v-model="form.elevatorName" placeholder="请输入电梯名称" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="维修单号" prop="repairCode">-->
    <!--          <el-input v-model="form.repairCode" placeholder="请输入维修单号" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="故障单号" prop="faultCode">-->
    <!--          <el-input v-model="form.faultCode" placeholder="请输入故障单号" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="开始时间" prop="startDate">-->
    <!--          <el-date-picker v-model="form.startDate" clearable placeholder="请选择开始时间" type="datetime" value-format="YYYY-MM-DD HH:mm:ss">-->
    <!--          </el-date-picker>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="是否停梯（N.否，Y.是）" prop="isStopElevator">-->
    <!--          <el-input v-model="form.isStopElevator" placeholder="请输入是否停梯（N.否，Y.是）" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="提交时间" prop="submitDate">-->
    <!--          <el-date-picker v-model="form.submitDate" clearable placeholder="请选择提交时间" type="datetime" value-format="YYYY-MM-DD HH:mm:ss">-->
    <!--          </el-date-picker>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="维修用时" prop="repairHours">-->
    <!--          <el-input v-model="form.repairHours" placeholder="请输入维修用时" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="更换配件" prop="replaceParts">-->
    <!--          <el-input v-model="form.replaceParts" placeholder="请输入更换配件" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="故障原因" prop="faultReason">-->
    <!--          <el-input v-model="form.faultReason" placeholder="请输入故障原因" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="维修方案" prop="repairPlan">-->
    <!--          <el-input v-model="form.repairPlan" placeholder="请输入维修方案" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="维修人ID" prop="repairUserId">-->
    <!--          <el-input v-model="form.repairUserId" placeholder="请输入维修人ID" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="维修人" prop="repairPeople">-->
    <!--          <el-input v-model="form.repairPeople" placeholder="请输入维修人" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="维修图片" prop="repairImage">-->
    <!--          <image-upload v-model="form.repairImage" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="维修人签字" prop="repairSign">-->
    <!--          <el-input v-model="form.repairSign" placeholder="请输入维修人签字" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="当前流程状态 (1.已接受 2.已开始维修 3.已完成)" prop="processState">-->
    <!--          <el-input v-model="form.processState" placeholder="请输入当前流程状态 (1.已接受 2.已开始维修 3.已完成)" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="确认人" prop="confirmPeople">-->
    <!--          <el-input v-model="form.confirmPeople" placeholder="请输入确认人" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="确认时间" prop="confirmDate">-->
    <!--          <el-date-picker v-model="form.confirmDate" clearable placeholder="请选择确认时间" type="datetime" value-format="YYYY-MM-DD HH:mm:ss">-->
    <!--          </el-date-picker>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="确认人签字" prop="confirmSign">-->
    <!--          <el-input v-model="form.confirmSign" placeholder="请输入确认人签字" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="评分" prop="score">-->
    <!--          <el-input v-model="form.score" placeholder="请输入评分" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="评分内容">-->
    <!--          <editor v-model="form.scoreContent" :min-height="192" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="派单人头像" prop="dispatchAvatar">-->
    <!--          <el-input v-model="form.dispatchAvatar" placeholder="请输入派单人头像" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="派单人" prop="dispatchPeople">-->
    <!--          <el-input v-model="form.dispatchPeople" placeholder="请输入派单人" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="派单时间" prop="dispatchDate">-->
    <!--          <el-date-picker v-model="form.dispatchDate" clearable placeholder="请选择派单时间" type="datetime" value-format="YYYY-MM-DD HH:mm:ss">-->
    <!--          </el-date-picker>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="提交人" prop="submitter">-->
    <!--          <el-input v-model="form.submitter" placeholder="请输入提交人" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="备注" prop="remark">-->
    <!--          <el-input v-model="form.remark" placeholder="请输入内容" type="textarea" />-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <template #footer>-->
    <!--        <div class="dialog-footer">-->
    <!--          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>-->
    <!--          <el-button @click="cancel">取 消</el-button>-->
    <!--        </div>-->
    <!--      </template>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script lang="ts" name="ElevatorRepair" setup>
import {
  addElevatorRepair,
  delElevatorRepair,
  getElevatorRepair,
  listElevatorRepair,
  updateElevatorRepair
} from "@/api/iot/elevatorRepair";
import { ElevatorRepairForm, ElevatorRepairQuery, ElevatorRepairVO } from "@/api/iot/elevatorRepair/types";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { iot_repair_process } = toRefs<any>(proxy?.useDict("iot_repair_process"));
const elevatorRepairList = ref<ElevatorRepairVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const elevatorRepairFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ""
});

const initFormData: ElevatorRepairForm = {
  repairId: undefined,
  elevatorId: undefined,
  elevatorName: undefined,
  repairCode: undefined,
  faultCode: undefined,
  startDate: undefined,
  isStopElevator: undefined,
  submitDate: undefined,
  repairHours: undefined,
  replaceParts: undefined,
  faultReason: undefined,
  repairPlan: undefined,
  repairUserId: undefined,
  repairPeople: undefined,
  repairImage: undefined,
  repairSign: undefined,
  doneStatus: undefined,
  processState: undefined,
  confirmPeople: undefined,
  confirmDate: undefined,
  confirmSign: undefined,
  score: undefined,
  scoreContent: undefined,
  dispatchAvatar: undefined,
  dispatchPeople: undefined,
  dispatchDate: undefined,
  reportType: undefined,
  submitter: undefined,
  remark: undefined
};
const data = reactive<PageData<ElevatorRepairForm, ElevatorRepairQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    elevatorId: undefined,
    elevatorName: undefined,
    repairCode: undefined,
    faultCode: undefined,
    startDate: undefined,
    isStopElevator: undefined,
    submitDate: undefined,
    repairHours: undefined,
    replaceParts: undefined,
    faultReason: undefined,
    repairPlan: undefined,
    repairUserId: undefined,
    repairPeople: undefined,
    repairImage: undefined,
    repairSign: undefined,
    doneStatus: undefined,
    processState: undefined,
    confirmPeople: undefined,
    confirmDate: undefined,
    confirmSign: undefined,
    score: undefined,
    scoreContent: undefined,
    dispatchAvatar: undefined,
    dispatchPeople: undefined,
    dispatchDate: undefined,
    reportType: undefined,
    submitter: undefined,
    params: {}
  },
  rules: {
    repairId: [
      { required: true, message: "维修ID不能为空", trigger: "blur" }
    ],
    elevatorId: [
      { required: true, message: "关联电梯ID不能为空", trigger: "blur" }
    ],
    elevatorName: [
      { required: true, message: "电梯名称不能为空", trigger: "blur" }
    ],
    repairCode: [
      { required: true, message: "维修单号不能为空", trigger: "blur" }
    ],
    faultCode: [
      { required: true, message: "故障单号不能为空", trigger: "blur" }
    ],
    startDate: [
      { required: true, message: "开始时间不能为空", trigger: "blur" }
    ],
    isStopElevator: [
      { required: true, message: "是否停梯（N.否，Y.是）不能为空", trigger: "blur" }
    ],
    submitDate: [
      { required: true, message: "提交时间不能为空", trigger: "blur" }
    ],
    repairHours: [
      { required: true, message: "维修用时不能为空", trigger: "blur" }
    ],
    replaceParts: [
      { required: true, message: "更换配件不能为空", trigger: "blur" }
    ],
    faultReason: [
      { required: true, message: "故障原因不能为空", trigger: "blur" }
    ],
    repairPlan: [
      { required: true, message: "维修方案不能为空", trigger: "blur" }
    ],
    repairUserId: [
      { required: true, message: "维修人ID不能为空", trigger: "blur" }
    ],
    repairPeople: [
      { required: true, message: "维修人不能为空", trigger: "blur" }
    ],
    repairImage: [
      { required: true, message: "维修图片不能为空", trigger: "blur" }
    ],
    repairSign: [
      { required: true, message: "维修人签字不能为空", trigger: "blur" }
    ],
    doneStatus: [
      { required: true, message: "完成状态(0:确认完成;1:评价完成)不能为空", trigger: "change" }
    ],
    processState: [
      { required: true, message: "当前流程状态 (1.已接受 2.已开始维修 3.已完成)不能为空", trigger: "blur" }
    ],
    confirmPeople: [
      { required: true, message: "确认人不能为空", trigger: "blur" }
    ],
    confirmDate: [
      { required: true, message: "确认时间不能为空", trigger: "blur" }
    ],
    confirmSign: [
      { required: true, message: "确认人签字不能为空", trigger: "blur" }
    ],
    score: [
      { required: true, message: "评分不能为空", trigger: "blur" }
    ],
    scoreContent: [
      { required: true, message: "评分内容不能为空", trigger: "blur" }
    ],
    dispatchAvatar: [
      { required: true, message: "派单人头像不能为空", trigger: "blur" }
    ],
    dispatchPeople: [
      { required: true, message: "派单人不能为空", trigger: "blur" }
    ],
    dispatchDate: [
      { required: true, message: "派单时间不能为空", trigger: "blur" }
    ],
    reportType: [
      { required: true, message: "上报类型(0:人工上报;1:智能设备;2:微信上报)不能为空", trigger: "change" }
    ],
    submitter: [
      { required: true, message: "提交人不能为空", trigger: "blur" }
    ],
    remark: [
      { required: true, message: "备注不能为空", trigger: "blur" }
    ]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询电梯维修列表 */
const getList = async () => {
  loading.value = true;
  const res = await listElevatorRepair(queryParams.value);
  elevatorRepairList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  elevatorRepairFormRef.value?.resetFields();
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

/** 多选框选中数据 */
const handleSelectionChange = (selection: ElevatorRepairVO[]) => {
  ids.value = selection.map(item => item.repairId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "添加电梯维修";
};

/** 修改按钮操作 */
const handleUpdate = async (row?: ElevatorRepairVO) => {
  reset();
  const _repairId = row?.repairId || ids.value[0];
  const res = await getElevatorRepair(_repairId);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = "修改电梯维修";
};

/** 提交按钮 */
const submitForm = () => {
  elevatorRepairFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.repairId) {
        await updateElevatorRepair(form.value).finally(() => buttonLoading.value = false);
      } else {
        await addElevatorRepair(form.value).finally(() => buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("修改成功");
      dialog.visible = false;
      await getList();
    }
  });
};

/** 删除按钮操作 */
const handleDelete = async (row?: ElevatorRepairVO) => {
  const _repairIds = row?.repairId || ids.value;
  await proxy?.$modal.confirm("是否确认删除电梯维修编号为\"" + _repairIds + "\"的数据项？").finally(() => loading.value = false);
  await delElevatorRepair(_repairIds);
  proxy?.$modal.msgSuccess("删除成功");
  await getList();
};

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download("iot/elevatorRepair/export", {
    ...queryParams.value
  }, `elevatorRepair_${new Date().getTime()}.xlsx`);
};

onMounted(() => {
  getList();
});
</script>
